<template>
  <div>
      
  <!-- 1.0 提交评论 -->
        <div class="postCommentStyle">
            <h4 class="postCommentTitle">
                提交评论
            </h4>
            <div class="submitTextArea">
                <textarea ref="commentTextArea" placeholder="请输入要评论的内容"  rows="3">

                </textarea>
                <mt-button @click="postcomment" type="primary" size="large">提交评论</mt-button>
            </div>
        </div>

        <!-- 2.0 评论列表 -->
        <div class="commentListStyle">
            <h4 class="commentListTitle">
                评论列表
            </h4>
            <div v-for="item in commentList" class="commentContent">
                <h5>{{item.content}}</h5>
                <p>
                    <span class="commentUser">
                        {{item.user_name}}
                    </span>
                    <span class="commentTime">
                        {{item.add_time}}
                    </span>
                </p>
            </div>
            <mt-button @click="loadMore" plain class="loadmore" type="danger" size="large">加载更多</mt-button>
        </div>

  </div>
</template>

<style scoped>
   h4{
        border-bottom: 1px solid rgba(92,92,92,0.3);
        padding: 5px 5px 10px 5px;
    }

    .submitTextArea{
        padding: 5px;
    }

    .commentListStyle{
        padding: 5px;
        margin-top: 20px;
        border-top: 1px solid rgba(92,92,92,0.3);
    }
    .commentContent{
        padding: 5px;
        border-bottom: 1px solid rgba(92,92,92,0.3);
    }

    h5{
        font-size: 16px;
        color: black;
    }

    .commentUser,.commentTime{
        margin-top: 10px;
        color:#0094ff;
        float: left;
        width: 50%;
    }

    .commentTime{
        float: right;
    }

    .commentContent{
        height: 70px;
        overflow-y: auto;
    }

    .loadmore{
        margin-top: 15px;
    }
</style>

<script>
      import common from '../../tools/common.js';


      import { Toast } from 'mint-ui';

       export default {

            data(){
              return {
                    pageIndex:1,
                    isCompleteLoad:false,
                    commentList:[]
              }; 
            },


            created(){
              

              // 获取评论的数据
              this.getCommet(this.pageIndex,true);
              // this.postcomment();

              },
            methods:{
                getCommet(pageIndex,isfirst) {
                  
                  const url =common.apihost+'api/getcomments/'+this.commentId+'?pageindex='+pageIndex;



                this.$http.get(url).then(res=>{
                     
                   if(isfirst){
                    if(res.body.message.length<=0){
                        Toast('还没有评论数据呢');
                    }
                    this.commentList=res.body.message;
                   }else{
                      if(res.body.message.lenght<=0){
                          
                        Toast('已经加载全部了');

                        this.isCompleteLoad=true;
                      }

                      this.commentList=this.commentList.concat(res.body.message);
                   }

                },err=>{
                    console.log(err);
                })
                }
                ,
                 // postcomment(){
                       
                 //       // 获取提交的内容
                 //       const commentContent=this.$refs.commentTextArea.value;

                 //       // 判断评论是否为空
                 //       if(!commentContent||commentContent.trim().length<=0){
                 //           Toast('请输入评论');
                 //           return ;
                 //       }


                 //       // 地址
                 //       const url = common.apihost+'api/postcomment/'+this.commentId;


                 //       // 发送请求响应数据
                 //       this.$http.post(url,{content:commentContent},{emulateJSON:true},res=>{
                                
                 //            console.log(11111);
                 //            this.$refs.commentTextArea.value="";

                 //            this.pageIndex=1;
                         
                 //            this.getCommet(this.pageIndex,true);

                 //       },err=>{
                 //        console.log(err);
                 //       })


                 // },
                postcomment(){
                //1.得获取评论textarea中的内容
                const commentContent = this.$refs.commentTextArea.value;
                console.log(commentContent);

                if (!commentContent || commentContent.trim().length<=0){
                    Toast("请输入评论内容!");
                    return;
                }

                //2.url
                const url = common.apihost+"api/postcomment/"+this.commentId;

                //3.post request
                this.$http.post(url,{content:commentContent},{emulateJSON:true}).then(res=>{
                    /**
                     * 成功之后需要做哪几件事
                     * 1.重新获取第一页数据
                     * 2.弹出提醒用户发表成功
                     * 3.清空textarea中的内容
                     * */
                    Toast(res.body.message);

                    this.$refs.commentTextArea.value = "";

                    //重新获取第一页数据
                    this.pageIndex = 1;
                    this.getCommet(this.pageIndex,true);
                    // window.location=window.location;
                },err=>{
                    console.log(err);
                })
            },
                 loadMore(){
                    if(this.isCompleteLoad){
                        return; 
                    }
                    this.pageIndex++;
                    this.getCommet(this.pageIndex,false);
                 }
            },
            props:[

              "commentId"
             ]
       
   }
</script>